<template>
    <a-modal :title="type === 1 ? '业务需求明细' : '产品需求明细'" centered v-model:visible="visible" :width="1000" :height="600" :footer="null">
        <custom-table ref="ruleTableRef" class="margin-t-16" :scroll="{ x: 800 }" size="small" rowKey="id" :pagination="false" :columns="columns" :data-source="list || []" />
        <div style="height: 100px" />
    </a-modal>
</template>

<script lang="ts">
import { detailColumns } from '@/views/energyManage/analysisReport/config/detailColumns';
import { CustomTable } from '@/components';
import { defineComponent, ref, onDeactivated, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: { CustomTable },
    setup() {
        const state = reactive<any>({
            visible: false,
            list: [],
            type: 1
        });
        const visible = ref(false);
        const columns = computed(() => {
            if (state.type === 1) {
                return detailColumns.columnsD.slice(0, detailColumns.columnsD.length - 1);
            } else {
                return detailColumns.columnsE.slice(0, detailColumns.columnsE.length - 1);
            }
        });
        const open = async (key, detail) => {
            state.list = detail[key];
            state.type = key === 'businessInfos' ? 1 : 2;
            state.visible = true;
        };
        // 销毁时关闭弹窗
        onDeactivated(() => {
            visible.value = false;
        });
        return {
            ...toRefs(state),
            open,
            detailColumns,
            columns
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 24px;
    background: #fff;
    .table-toolbar-wrap {
        margin: 16px 0;
    }
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
}
</style>